<template>
  <div class="navBarTwoBox">
    <ul class="navBarTwoUl">
      <router-link to="/findMusic/recommend" tag="li">
        <span> 推荐</span>
      </router-link>
      <router-link to="/findMusic/rankinglist" tag="li">
        <span>排行榜</span>
      </router-link>
      <router-link to="/findMusic/songsheet" tag="li">
        <span>歌单</span>
      </router-link>
      <router-link to="/findMusic/radiostation" tag="li">
        <span>主播电台</span>
      </router-link>
      <router-link to="/findMusic/singer" tag="li">
        <span>歌手</span>
      </router-link>
      <router-link to="/findMusic/newdisc" tag="li">
        <span>新碟上映</span>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: "navBarTwo",
};
</script>
<style lang="scss" scoped>
.navBarTwoBox {
  background: #c20c0c;
  height: 35px;
}
.navBarTwoUl {
  display: flex;
  margin: auto;
  height: 34px;
  width: 740px;
}
.navBarTwoUl li {
  display: flex;
  align-items: center;
  font-size: 12px;
  margin: 0 17px;
  color: #fff;
}
.navBarTwoUl span {
  padding: 0 13px;
  height: 20px;
  line-height: 20px;
}
.router-link-active span {
  border-radius: 10px;
  background: #9b0909;
}
.navBarTwoUl li:hover span {
  border-radius: 10px;
  background: #9b0909;
}
</style>